<template>
  <div class="w-full">
    <div class="text-center mb-12">
      <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-2">联系我</h1>
      <p class="text-xl text-gray-600">有任何问题或建议，欢迎随时联系我</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-1 gap-12 mb-12">
      <!-- 联系信息 -->
      <div>
        <h2 class="text-3xl font-bold text-gray-800 mb-8">联系方式</h2>
        <div class="space-y-6">
          <div
            class="flex items-start gap-4 p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 hover:-translate-y-1">
            <div class="text-3xl flex-shrink-0">📧</div>
            <div>
              <h3 class="text-lg font-semibold text-gray-800 mb-2">邮箱</h3>
              <p class="text-gray-600 mb-1">1440752319@qq.com</p>
              <p class="text-gray-500 text-sm">通常会在24小时内回复</p>
            </div>
          </div>

          <div
            class="flex items-start gap-4 p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 hover:-translate-y-1">
            <div class="text-3xl flex-shrink-0">💬</div>
            <div>
              <h3 class="text-lg font-semibold text-gray-800 mb-2">微信</h3>
              <p class="text-gray-600 mb-1">15302254544</p>
              <p class="text-gray-500 text-sm">添加时请备注来意</p>
            </div>
          </div>

          <div
            class="flex items-start gap-4 p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 hover:-translate-y-1">
            <div class="text-3xl flex-shrink-0">🐙</div>
            <div>
              <h3 class="text-lg font-semibold text-gray-800 mb-2">手机号</h3>
              <p class="text-gray-600 mb-1">15302254544</p>
              <p class="text-gray-500 text-sm">添加时请备注来意</p>
            </div>
          </div>

          <!-- <div
            class="flex items-start gap-4 p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 hover:-translate-y-1">
            <div class="text-3xl flex-shrink-0">🐙</div>
            <div>
              <h3 class="text-lg font-semibold text-gray-800 mb-2">GitHub</h3>
              <p class="text-gray-600 mb-1">github.com/example</p>
              <p class="text-gray-500 text-sm">欢迎关注我的开源项目</p>
            </div>
          </div> -->

          <!-- <div
            class="flex items-start gap-4 p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 hover:-translate-y-1">
            <div class="text-3xl flex-shrink-0">🐦</div>
            <div>
              <h3 class="text-lg font-semibold text-gray-800 mb-2">Twitter</h3>
              <p class="text-gray-600 mb-1">@example</p>
              <p class="text-gray-500 text-sm">分享技术动态和想法</p>
            </div>
          </div> -->
        </div>
      </div>

      <!-- 联系表单 -->
      <!-- <div>
        <h2 class="text-3xl font-bold text-gray-800 mb-8">发送消息</h2>
        <form @submit.prevent="submitForm" class="space-y-6">
          <div>
            <label for="name" class="block text-gray-700 font-medium mb-2">姓名 *</label>
            <input id="name" v-model="form.name" type="text" required placeholder="请输入您的姓名"
              class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:outline-none focus:border-indigo-500 transition-colors duration-300">
          </div>

          <div>
            <label for="email" class="block text-gray-700 font-medium mb-2">邮箱 *</label>
            <input id="email" v-model="form.email" type="email" required placeholder="请输入您的邮箱"
              class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:outline-none focus:border-indigo-500 transition-colors duration-300">
          </div>

          <div>
            <label for="subject" class="block text-gray-700 font-medium mb-2">主题</label>
            <input id="subject" v-model="form.subject" type="text" placeholder="请输入消息主题"
              class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:outline-none focus:border-indigo-500 transition-colors duration-300">
          </div>

          <div>
            <label for="message" class="block text-gray-700 font-medium mb-2">消息内容 *</label>
            <textarea id="message" v-model="form.message" required placeholder="请输入您的消息内容..." rows="6"
              class="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:outline-none focus:border-indigo-500 transition-colors duration-300 resize-vertical"></textarea>
          </div>

          <div v-if="submitError" class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-4">
            {{ submitError }}
          </div>

          <div v-if="submitMessage"
            class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg mb-4">
            {{ submitMessage }}
          </div>

          <button type="submit"
            class="w-full px-8 py-4 bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-medium rounded-lg cursor-pointer transition-all duration-300 hover:shadow-lg hover:-translate-y-1 disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:translate-y-0"
            :disabled="isSubmitting">
            {{ isSubmitting ? '发送中...' : '发送消息' }}
          </button>
        </form>
      </div> -->
    </div>

    <!-- 常见问题 -->
    <section>
      <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">常见问题</h2>
      <div class="space-y-4">
        <div v-for="(faq, index) in faqs" :key="index" class="bg-white rounded-xl overflow-hidden shadow-sm">
          <div
            class="flex justify-between items-center p-6 cursor-pointer hover:bg-gray-50 transition-colors duration-300"
            @click="toggleFaq(index)">
            <h3 class="text-lg font-semibold text-gray-800">{{ faq.question }}</h3>
            <span class="text-2xl text-indigo-500 font-bold transition-transform duration-300"
              :class="{ 'rotate-45': faq.expanded }">
              +
            </span>
          </div>
          <div class="overflow-hidden transition-all duration-300 bg-gray-50"
            :class="{ 'max-h-32': faq.expanded, 'max-h-0': !faq.expanded }">
            <p class="p-6 text-gray-600 leading-relaxed">{{ faq.answer }}</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
// 表单数据
const form = ref({
  name: '',
  email: '',
  subject: '',
  message: ''
})

const isSubmitting = ref(false)

// 常见问题数据
const faqs = ref([
  {
    question: '如何订阅博客更新？',
    answer: '您可以通过RSS订阅或者关注我的社交媒体账号来获取最新的博客更新。',
    expanded: false
  },
  {
    question: '可以转载您的文章吗？',
    answer: '欢迎转载，但请注明原文链接和作者信息。如需商业用途，请先联系我获得授权。',
    expanded: false
  },
  {
    question: '可以合作写文章吗？',
    answer: '当然可以！如果您有好的技术分享或项目经验，欢迎投稿或合作。',
    expanded: false
  },
  {
    question: '如何参与开源项目？',
    answer: '您可以在GitHub上找到我的开源项目，欢迎提交Issue和Pull Request。',
    expanded: false
  }
])

// 表单状态
const submitMessage = ref('')
const submitError = ref('')

// 提交表单
const submitForm = async () => {
  // 提示该功能还未完善
  alert('该功能还未完善, 请直接联系我')
  return;

  // // 表单验证
  // if (!form.value.name || !form.value.email || !form.value.subject || !form.value.message) {
  //   submitError.value = '请填写所有必填字段'
  //   return
  // }

  // // 邮箱格式验证
  // const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  // if (!emailRegex.test(form.value.email)) {
  //   submitError.value = '邮箱格式不正确'
  //   return
  // }

  // isSubmitting.value = true
  // submitError.value = ''
  // submitMessage.value = ''

  // try {
  //   const result = await $fetch('/api/contact', {
  //     method: 'POST',
  //     body: form.value
  //   })

  //   submitMessage.value = result.message || '消息发送成功！我会尽快回复您。'

  //   // 重置表单
  //   form.value = {
  //     name: '',
  //     email: '',
  //     subject: '',
  //     message: ''
  //   }
  // } catch (error) {
  //   console.error('提交失败:', error)
  //   submitError.value = error.data?.statusMessage || '发送失败，请稍后重试'
  // } finally {
  //   isSubmitting.value = false
  // }
}

// 切换FAQ展开状态
const toggleFaq = (index) => {
  faqs.value[index].expanded = !faqs.value[index].expanded
}
</script>